<template>
  <!--讲师列表页 -->
  <div class="Classlist" ref="home">
    <!-- <van-nav-bar left-text="返回" left-arrow @click-left="goback" /> -->
    <div class="img"><img :src="item.cover_img" alt="" /></div>
    <div class="content">
      <h4>{{ item.title }}</h4>
      <p>
        共{{ item.total_periods }}课时&nbsp;|&nbsp;￥{{
          item.sales_num
        }}人已报名
      </p>
      <p class="p">
        开课时间:&nbsp;{{ item.start_play_date | startTime }}-{{
          item.end_play_date | endTime
        }}
      </p>
      <b class="b"><s style="color:black">{{ item.sales_base+".00" }}</s><u>{{item.course_classify_id+".00"}}</u></b>
    </div>
    <div class="classshouhou">
      <div class="shouhou">
       <div class="item">
           <span>优惠:&emsp;领取优惠券最多可减<i style="color:red">{{item.sales_base}}</i></span>
        <div style="color: #aaaaaa" >
          领取<i class="iconfont icon-youbian"></i>
        </div>
       </div>
         <div class="item">
           <span>服务:&emsp;课程售后</span>
        <div style="color: #aaaaaa" @click="modelShow = !modelShow">
          详情<i class="iconfont icon-youbian"></i>
        </div>
       </div>
      </div>
    </div>
    <div class="classTeam">
      <h3 style="font-weight: normal">教学团队</h3>
      <ul>
        <li v-for="item in team" :key="item.teacher_id">
          <img :src="item.teacher_avatar" alt=""  @click='gotoClass'/>
          <p>{{ item.teacher_name }}</p>
        </li>
      </ul>
    </div>
    <div id="nav-head" class="header">
      <header>
        <div class="h-title">
          <p @click="goBottom(item)">
            <span
              v-for="(item, i) in nav"
              :key="i"
              @click="flag = i"
              :class="flag == i ? 'active' : ''"
              >{{ item }}</span
            >
          </p>
        </div>
      </header>
    </div>
    <div class="cd-tro">
      <p class="cd-title">课程介绍</p>
      <div class="cd-details">
        <p>crazy&nbsp; english</p>
        <p>so pretty</p>
      </div>
    </div>
    <div class="cd">
      <p class="cd1">课程大纲</p>
      <div class="cd2">
        <span>1、字符的魅力</span>
      </div>
    </div>
    <myClasspingjia></myClasspingjia>
    <div class="footer" @click="gotodizhi(item)">
      <div style="padding: 5px 16px">
        <van-button type="danger" block round> 立即报名 </van-button>
      </div>
    </div>
    <van-popup
      v-model="modelShow"
      position="bottom"
      round
      :style="{ height: '63%' }"
      class="popupbottom"
    >
      <div class="pop-serve">
        <p class="pop-title">
          课程服务<span class="quxiao" @click="modelShow = false"
            ><img src="@/assets/img/xhao.png" alt=""
          /></span>
        </p>
        <div class="pop-item">
          <p>课程售后</p>
          <p>多谢关注 新课程敬请期待</p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { appIndex } from "../../utils/api";
import myClasspingjia from "../../components/class/myclasspingjia.vue";
export default {
  data() {
    return {
      item: JSON.parse(this.$route.query.item),
      team: [], //教师团队
      nav: ["课程介绍", "课程大纲", "课程评价"],
      flag: 0,
      modelShow: false, //模态框
    };
  },
  created() {
    appIndex().then((res) => {
      this.team = res.data[2].list;
      console.log(this.team);
    });
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    goBottom() {
      this.$refs.home.scroll({
        top: 667,
        behavior: "smooth",
      });
    },
    gotodizhi(item){
      console.log(item);
      this.$router.push({path:'/classDizhi',query:{item:JSON.stringify(item)}})
    },
    gotoClass(){
      this.$router.push('/class')
    }
  },
  components: {
    myClasspingjia,
  },
  filters: {
    startTime(val) {
      //使用过滤器把毫秒数转化成开始时间
      var time = new Date(val * 1000);
      return time.toLocaleString("chinese", { hour12: false });
    },
    endTime(val) {
      //使用过滤器把毫秒数转化成结束时间
      var time = new Date(val * 1000);
      return time.toLocaleString("chinese", { hour12: false });
    },
  },
};
</script>

<style lang='scss' scoped>
.Classlist {
  height: 100%;
  background-color: #f0f2f5;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
.img {
  height: 218px;
  background-color: #f0f2f5;
  display: flex;
  img {
    width: 100%;
    height: 100%;
    flex-grow: 0;
  }
}
.content {
  height: 138px;
  padding: 16px 18px;
  background-color: #fff;
  p {
    margin-top: 13px;
    color: #adadad;
  }
  .p {
    margin: 13px 0 15px 0;
  }
  b {
    color: red;
    font-size: 14px;
    font-weight: normal;
    u{
      text-decoration: none;
      font-size: 16px;
    }
  }
}
.classshouhou {
  margin: 14px 0;
  height: 53px;
  background-color: #fff;
  padding-top: 5px;
 
  .shouhou .item {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    height: 18px;
    margin-bottom: 10px;
  }
}
.classTeam {
  height: 137px;
  background-color: #fff;
  padding: 17px 0 14px 12px;
  ul {
    padding: 17px 0 0 20px;
    height: 64px;
    display: flex;
    li {
      margin-right: 18px;
      width: 40px;
      height: 61px;
    }
    img {
      width: 39px;
      height: 39px;
      border-radius: 50%;
      flex-grow: 0;
    }
  }
}
.header {
  border-bottom: 1px solid #ccc;
  .active {
    color: red;
  }
  height: 44px;
  margin-top: 2.66667vw;
  background-color: #fff;
  p {
    display: flex;

    span {
      flex-basis: 33%;
      line-height: 44px;
      text-align: center;
      font-size: 16px;
    }
  }
}
.cd-tro {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-family: PingFangSC-Regular, PingFang SC;
  vertical-align: baseline;
  outline: none;
  height: 100px;
  padding: 3px 13px;
  background-color: #fff;
  .cd-title {
    margin-top: 10px;
  }
  .cd-details {
    padding: 5px 3px;
  }
}
.cd {
  background-color: #fff;
  height: 126px;
}
.cd1 {
  margin-top: 10px;
  background: #fff;
  padding: 0.13333rem 0.26667rem;
  padding: 1.33333vw 2.66667vw;
  font-size: 16px;
}
.cd2 {
  height: 58px;
  margin: 0 25px 10px;
  line-height: 58px;
  font-size: 16px;
}

.popupbottom {
  .pop-serve {
    height: 123px;
    .pop-item {
      height: 73px;
      padding: 10px 15px;
      font-size: 16px;
      p {
        margin-bottom: 10px;
      }
    }
    .pop-title {
      height: 50px;
      text-align: center;
      font-size: 17px;
      line-height: 50px;
      // display: flex;
      .quxiao {
        float: right;
        margin-top: 10px;
        margin-right: 10px;
        width: 16px;
        height: 16px;
        display: flex;
        img {
          width: 100%;
          height: 100%;
          flex-grow: 0;
        }
      }
    }
  }
}
.footer {
  margin-top: 7px;
  height: 63px;
  line-height: 63px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  .van-button {
    height: 47px;
  }
}
</style>
